<template>
  <div class="menu-info">
    <div class="menu-detail">
      <div class="detail_info">
        <div class="info_img">
          <img :src="info.diss_pic" alt="">
        </div>
        <div class="info_more">
          <div class="name">{{info.diss_name}}</div>
          <div class="singer">
            <span class="iconfont icon-ren111"></span>
            <span>{{info.nick_name}}</span>
          </div>
          <ul class="detail">
          <li>标签：
            <span class="tag" v-for="(tag,index) in info.tags" :key="index">{{tag.name}}&nbsp;</span>
          </li>
          <li>歌曲数：<span>{{info.song_num}}</span></li>
        </ul>
          <OtherInfo></OtherInfo>
        </div>

      </div>
    </div>
  </div>

</template>

<script>
    import {mapState} from 'vuex'
    import OtherInfo from '../OtherInfo/OtherInfo'
    export default {
        name: "MenuInfo",
        props:{
          info:Object
        },
        components:{
          OtherInfo
        }
    }
</script>

<style scoped lang="less">
  .menu-info .menu-detail{width: 100%;background:linear-gradient(to bottom,#f2f2f2,#fafafa);margin: 0 auto;}
  .menu-info .menu-detail .detail_info{width: 1200px;margin: 0px auto; padding: 40px 0px;position: relative}
  .menu-info .detail_info .info_img{width: 250px;height: 250px;display: inline-block;margin-right: 56px}
  .menu-info .detail_info .info_img img{width: 250px;height: 250px;}
  .menu-info .detail_info .info_more{display: inline-block;position: absolute;margin-top: 30px;top:40px}
  .menu-info .detail_info .info_more .name{font-size: 30px;padding-bottom: 16px}
  .menu-info .detail_info .info_more .singer .iconfont{color:#a2a2a2;}
  .menu-info .detail_info .info_more .singer>span:hover{cursor: pointer;color: #31c27c}
  .menu-info .detail_info .info_more .detail{padding: 8px 0px;font-size: 14px}
  .menu-info .detail_info .info_more .detail .tag:hover{cursor: pointer;color: #31c27c}
  .menu-info .detail_info .info_more .detail li{margin: 15px 0px}
  .menu-info .detail_info .info_more .detail li:nth-child(1) span:last-child:hover{color: #31c27c;cursor: pointer}
</style>
